<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="3">
        <div class="chart-wrapper">
          <div class="poList">
            <div class="pointitem">
              <h3>积水点列表</h3>
              <ul class="listul">
                <li
                  :class="selectId==v.id?'active':''"
                  v-for="v in pointListData"
                  @click="getOne(v.stationName,v.id)"
                  :key="v.id"
                >{{v.stationName}}</li>
              </ul>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="listItem">
            <iframe
              frameborder="0"
              scrolling="no"
              :src="`https://open.ys7.com/ezopen/h5/iframe_se?url=${videoDetailInfo.videoAddress}&accessToken=${videoDetailInfo.accessToken}`"
              width="100%"
              height="100%"
              id="ysOpenDevice"
              allowfullscreen
            ></iframe>

            <div class="btnBox" v-if="btnShow">
              <div class="iicon" @click="btnShow=false">
                <img src="../../assets/png/closed.png" alt>
              </div>
              <div class="jujiao">
                <div class="yuanjiao" @click="changeVideo(11)">
                  <img src="../../assets/png/yuanjiao.png" alt>
                </div>
                <div class="jinjiao" @click="changeVideo(10)">
                  <img src="../../assets/png/jinjao.png" alt>
                </div>
              </div>
              <div class="yuan">
                <div class="shang" @click="changeVideo(0)">
                  <img src="../../assets/png/shang.png" alt>
                </div>
                <div class="xia" @click="changeVideo(1)">
                  <img src="../../assets/png/xia.png" alt>
                </div>
                <div class="zuo" @click="changeVideo(2)">
                  <img src="../../assets/png/zuo.png" alt>
                </div>
                <div class="you" @click="changeVideo(3)">
                  <img src="../../assets/png/you.png" alt>
                </div>
                <div class="zanting" @click="changeVideoStop(-1)">
                  <img src="../../assets/png/zanting.png" alt>
                </div>
              </div>
              <div class="fangdasuoxiao">
                <div class="fangda" @click="changeVideo(8)">
                  <img src="../../assets/png/fangda.png" alt>
                </div>
                <div class="suoxiao" @click="changeVideo(9)">
                  <img src="../../assets/png/suoxiao.png" alt>
                </div>
              </div>
            </div>

            <div class="huchu" @click="getBtns">
              <img src="../../assets/png/huchu.png" alt>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="9">
        <div class="chart-wrapper1">
          <el-row class="pointinfo">
            <el-col :span="12" class="coll">
              <div class="info_left">
                <div class="left_top">
                  <h4 class="lt_title">{{pointdetailInfo.stationName}}</h4>
                  <div class="top_box">
                    <span>当前水位：</span>
                    <span>{{pointdetailInfo.waterLevel}}</span>
                    <span>(CM)</span>
                  </div>
                  <div class="top_box">
                    <span>报警水位：</span>
                    <span>{{pointdetailInfo.warningWater}}</span>
                  </div>
                  <div class="top_box">
                    <span>警戒水位：</span>
                    <span class="top_input">
                      <span>
                        <el-input
                          v-model="warningWater"
                          size="mini"
                          class="mycolor"
                          maxlength="5"
                          style="color:red;width:50px"
                          :placeholder="pointdetailInfo.warningWater"
                        ></el-input>
                      </span>
                      <span>CM</span>
                    </span>
                    <span class="con_submit" @click="warnWater">提交</span>
                  </div>
                  <div class="top_box">
                    <span>警戒电压：</span>
                    <span class="top_input">
                      <span>
                        <el-input
                          v-model="WarningVoltage"
                          size="mini"
                          class="mycolor"
                          maxlength="5"
                          style="color:red;width:50px"
                          :placeholder="pointdetailInfo.warningVoltage"
                        ></el-input>
                      </span>
                      <span>V</span>
                    </span>
                    <span class="con_submit" @click="warnVoltage">提交</span>
                  </div>
                </div>
                <div class="left_bottom">
                  <h4 class="status_title">状态信息</h4>
                  <div class="status_info">
                    <span>设备状态：</span>
                    <span
                      :class="pointdetailInfo.waterOnlineStatus==1?'green':pointdetailInfo.waterOnlineStatus==2?'red':'gray'"
                    >{{pointdetailInfo.waterOnlineStatus==1?'正常':pointdetailInfo.waterOnlineStatus==0?'异常':'离线'}}</span>
                  </div>
                  <div class="status_info">
                    <span>在线状态：</span>
                    <span
                      :class="pointdetailInfo.waterOnlineStatus==1?'green':pointdetailInfo.waterOnlineStatus==2?'red':'gray'"
                    >{{pointdetailInfo.waterOnlineStatus==1?'正常':pointdetailInfo.waterOnlineStatus==0?'异常':'离线'}}</span>
                  </div>
                  <div class="status_info">
                    <span>水位状态：</span>
                    <span
                      :class="pointdetailInfo.waterWarningStatus==1?'green':pointdetailInfo.waterWarningStatus==2?'red':'gray'"
                    >{{pointdetailInfo.waterWarningStatus==1?'正常':pointdetailInfo.waterWarningStatus==0?'告警':'离线'}}</span>
                  </div>
                  <!-- <div class="status_info">
                    <span>电压状态：</span>
                    <span
                      :class="pointdetailInfo.pondingWarningStatus==1?'green':pointdetailInfo.pondingWarningStatus==2?'red':'gray'"
                    >{{pointdetailInfo.pondingWarningStatus==1?'正常':pointdetailInfo.pondingWarningStatus==0?'异常':'离线'}}</span>
                  </div> -->
                  <div class="status_info">
                    <span>更新时间：</span>
                    <span>{{pointdetailInfo.waterLastOnlineTime}}</span>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12" class="colr">
              <div class="info_right">
                <div class="solar_title">太阳能信息</div>
                <!-- <div class="solar_info">
                  <span>光伏电压：</span>
                  <span>{{pointdetailInfo.batteryPower}}</span>
                  <span>（V）</span>
                </div> -->
                <!-- <div class="solar_info">
                  <span>光伏电流：</span>
                  <span>{{pointdetailInfo.solarElectric}}</span>
                  <span>（A）</span>
                </div>-->
                <!-- <div class="solar_info">
                  <span>电池温度：</span>
                  <span>{{pointdetailInfo.batteryTemperature}}</span>
                  <span>（℃）</span>
                </div> -->
                <div class="solar_info">
                  <span>电池电压：</span>
                  <span>{{pointdetailInfo.batteryVoltage}}</span>
                  <span>（V）</span>
                </div>
                <!-- <div class="solar_info">
                  <span>负载电流：</span>
                  <span>{{pointdetailInfo.solarElectric}}</span>
                  <span>（A）</span>
                </div>-->
                <div class="solar_info">
                  <span>剩余电量：</span>
                  <!-- <span>{{pointdetailInfo.batteryVoltage}}</span> -->
                  <span>100</span>
                  <span>（%）</span>
                </div>
                <div class="solar_info">
                  <span>更新时间：</span>
                  <span>{{pointdetailInfo.waterLastOnlineTime}}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 图表 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <div class="search">
            <div class="data_query">
              <div class="data_name">数据统计</div>
              <el-form :inline="true" :model="search">
                <el-form-item v-if="typeTiem" label="日期选择">
                  <el-date-picker
                    v-model="search.time"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>

                <el-form-item v-else label="时间选择">
                  <el-date-picker
                    v-model="search.time"
                    type="datetime"
                    placeholder="任意时间点"
                    value-format="yyyy-MM-dd HH"
                  ></el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="报表类型">
                  <el-select v-model="table_data" placeholder @change="typeChange(table_data)">
                    <el-option label="日报表" value="day"></el-option>
                    <el-option label="时报表" value="hour"></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item>
                  <el-button type="primary" @click="getAddBook">查询</el-button>
                  <el-button @click="empty" type="info">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <div class="chartbox">
            <day-chart v-if="flag" :chart-data="dayPointChart"/>
            <div v-if="!flag" style="width:100%;height:400px"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getTime } from "../../utils/myMethod";
import DayChart from "./DayChart";
export default {
  name: "Pointlist",
   components: {
    DayChart
  },
  data() {
    return {
      btnShow: false, // 视频按钮
      flag: false,
      typeTiem: true, //图表类型切换
      table_data: "month", //默认天图表数据
      pointName: "锦霞南区",
      selectId: 1,
      warningWater: "0", //警戒水位
      WarningVoltage: "0", //警戒电压
      pointListData: [], //积水点列表
      pointdetailInfo: {}, // 积水点详情
        dayPointChart: {}, //积水点日积水
      videoDetailInfo: {},
      search: {
        time: getTime(new Date())
      }
    };
  },
  created() {
    this.getPointList();
    // this.getList(); //初始化图表数据
    this.getOneVideo(); // 默认显示第一条视频
    this.getDayChart();// 获取图表数据
  },
  methods: {
    getDayChart() {
      let _this = this;
      let time = _this.search.time;
      _this.$http
        .get("dataPonding/findByPondName", {
          params: {
            time: _this.search.time,
            dateType: "hours",
            name: this.pointName
          }
        })
        .then(res => {
          console.log(res, "day");
          let pointNameArr = [];
          let pondingDepthArr = [];
          let resData = res.data;
          let resLength = res.data.length;
          for (var i = 0; i < resLength; i++) {
            pointNameArr.push(resData[i].dateInt);
            pondingDepthArr.push(resData[i].pondingDepth);
          }
          this.dayPointChart.dataX = pointNameArr;
          this.dayPointChart.dataY = pondingDepthArr;
          if (resLength > 0) {
            this.flag = true;
          }
        });
    },
    getPointList() {
      this.$http
        .post("device/indexFindAll", {
          companyId: localStorage.getItem("companyId"),
          type: 4
        })
        .then(res => {
          this.pointListData = res.data;
          // console.log(this.pointListData);
        });
      // 默认显示第一条
      this.$http
        .get("device/findDeviceInfo", { params: { name: this.pointName } })
        .then(res => {
          if (res.data.length == 0) {
            return;
          }
          this.pointdetailInfo = res.data[0];
          console.log(this.pointdetailInfo, "22222222222");
        });
    },
    getOne(pointName, id) {
      this.selectId = id;
      this.pointName = pointName;
      this.$http
        .get("device/findDeviceInfo", { params: { name: pointName } })
        .then(res => {
          if (res.data.length == 0) {
            return;
          }
          this.pointdetailInfo = res.data[0];
          console.log(this.pointdetailInfo, "22222222222");
        });
      // this.getList(); //获取图表数据
      this.getOneVideo(); //获取单个视频
    },
    getOneVideo() {
      this.$http
        .get("deviceCamera/findByCameraName", {
          params: { cameraName: this.pointName }
        })
        .then(res => {
          this.videoDetailInfo = res.data;
        });
    },
    // 切换日，时报表
    // typeChange(value) {
    //   if (value === "day") {
    //     this.typeTiem = true;
    //     this.search.time = getTime(new Date());
    //   } else {
    //     this.typeTiem = false;
    //     this.search.time = getTimeHourMinutes(new Date());
    //   }
    // },
    //获取列表数据
    // getList() {
    //   let _this = this;
    //   let time = "";
    //   if (_this.typeTiem) {
    //     time = _this.search.time;
    //   } else {
    //     // time = getTimeHourMinutes(_this.search.time) + ":00:00";
    //     time = _this.search.time + ":00:00";
    //   }
    //   setTimeout(() => {
    //     let dateType = "";

    //     _this.$http
    //       .get("dataMsg/getAllWaterDetail", {
    //         params: {
    //           time,
    //           dateType: _this.table_data,
    //           name: _this.pointName
    //         }
    //       })
    //       .then(res => {
    //         if (res.data.length > 0) {
    //           this.drawLine(res.data[0] && res.data[0].dataMsgs);
    //         } else {
    //           this.drawLine([]);
    //           this.$message({
    //             showClose: true,
    //             message: "报表暂无数据"
    //           });
    //           return;
    //         }
    //       });
    //   }, 1000);
    // },
    //查询
    getAddBook() {
      console.log(this.search.time)
       this.flag = false;
      this.getDayChart();
    },
    //重置
    empty() {
      this.search = {
        time: getTime(new Date())
      };
      // this.noData = false;
      // this.typeTiem = true;
      // this.table_data = "day";
      // this.getList();
       this.flag = false;
      this.getDayChart();
    },
   
    getBtns() {
      this.btnShow = true;
    },
    //视频切换
    changeVideo(index) {
      this.getVideoAbility(index, this.speed);
    },
    // 视频停止
    changeVideoStop(speed) {
      this.getVideoAbility(this.index, speed);
    },
    getVideoAbility(index, speed) {
      this.$http
        .post("deviceCamera/changeLocation", {
          accessToken: this.accessToken,
          cameraNumber: this.deviceserial,
          channelNumber: 1,
          direction: index,
          speed: speed
        })
        .then(res => {
          this.index = index;
          // setTimeout(() => {
          //   this.changeVideoStop(-1);
          // }, 2000);
        });
    },
    // 修改警戒水位
    warnWater() {
      let that = this;
      let reg = /^[1-9]\d*$/;
      let wn = that.warningWater;

      let id = that.selectId;

      if (reg.test(wn)) {
        that.$http
          .post("deviceWater/updateWater", {
            id: id,
            // companyId: localStorage.getItem("companyId"),
            waringNum: wn
          })
          .then(res => {
            this.$message({
              message: res.message,
              type: "success",
              center: true
            });
          });
      } else {
        this.$message({
          message: "请输入合适的水位值",
          type: "error",
          center: true
        });
      }
    },
    // 修改警戒电压
    warnVoltage() {
      let that = this;
      let reg = /^0\.([1-9]|\d[1-9])$|^[1-9]\d{0,8}\.\d{0,2}$|^[1-9]\d{0,8}$/;
      let wn = that.WarningVoltage;

      let id = that.selectId;

      if (reg.test(wn)) {
        that.$http
          .post("/devicePonding/update", {
            id: id,
            // companyId: localStorage.getItem("companyId"),
            warningPower: wn
          })
          .then(res => {
            this.$message({
              message: res.message,
              type: "success",
              center: true
            });
          });
      } else {
        this.$message({
          message: "请输入合适的警戒电压值",
          type: "error",
          center: true
        });
        that.WarningVoltage = "";
      }
    }
  }
};
</script>

<style lang="less" scoped>
.active {
  background-color: rgba(102, 156, 249, 0.4);
}
.green {
  color: green;
}
.red {
  color: red;
}
.gray {
  color: gray;
}
.chart-wrapper {
  width: 100%;
  height: 500px;
  box-shadow: 0px 0px 13px 0px rgba(102, 102, 102, 0.13);
  margin: 5px 0;
}
.chart-wrapper1 {
  width: 100%;
  height: 500px;

  margin: 5px 0;
}
.poList {
  width: 90%;
  padding: 10px 0;

  margin: 0 auto;
  .pointitem {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .listul {
      width: 100%;
      height: 420px;
      overflow-y: auto;
    }

    h3 {
      height: 44px;
      text-align: left;
      // cursor: pointer;
    }
    ul > li {
      list-style: none;
      height: 38px;
      line-height: 38px;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      &:hover {
        background-color: #fff;
      }
    }
  }
}
.listItem {
  width: 100%;
  position: relative;
  height: 100%;
  .btnBox {
    position: absolute;
    top: 50%;
    right: 0;
    width: 200px;
    height: 80%;
    padding: 32px;
    background: rgba(5, 29, 70, 0.2);
    // opacity: 0.2;
    transform: translateY(-50%);
    border-radius: 8px;
    .iicon {
      position: absolute;
      width: 26px;
      height: 26px;
      top: 0;
      left: 0;
      cursor: pointer;
      img {
        width: 100%;
      }
    }
    .jujiao {
      width: 200px;
      height: 80px;
      // background-color: aquamarine;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .yuanjiao {
        width: 31px;
        height: 31px;
        cursor: pointer;
        img {
          width: 31px;
          height: 31px;
        }
      }
      .jinjiao {
        width: 31px;
        height: 31px;
        cursor: pointer;
        img {
          width: 31px;
          height: 31px;
        }
      }
    }
    .yuan {
      width: 160px;
      height: 160px;
      background: url("../../assets/png/dayuan.png") center center no-repeat;
      background-size: contain;
      position: relative;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      .zanting {
        position: absolute;
        width: 40px;
        height: 40px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        img {
          width: 100%;
        }
      }
      .shang {
        position: absolute;
        cursor: pointer;
        width: 20px;
        height: 20px;
        top: 10px;
        left: 50%;
        transform: translate(-50%, 0);
        img {
          width: 100%;
        }
      }
      .xia {
        position: absolute;
        cursor: pointer;
        width: 20px;
        height: 20px;
        bottom: 10px;
        left: 50%;
        transform: translate(-50%, 0);
        img {
          width: 100%;
        }
      }
      .zuo {
        position: absolute;
        cursor: pointer;
        width: 20px;
        height: 20px;
        top: 50%;
        left: 10px;
        transform: translate(0, -50%);
        img {
          width: 100%;
        }
      }
      .you {
        position: absolute;
        cursor: pointer;
        width: 20px;
        height: 20px;
        top: 50%;
        right: 10px;
        transform: translate(0, -50%);
        img {
          width: 100%;
        }
      }
    }
    .fangdasuoxiao {
      width: 200px;
      height: 80px;
      // background-color: rgb(73, 207, 248);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .fangda {
        width: 31px;
        height: 31px;
        cursor: pointer;
        img {
          width: 31px;
          height: 31px;
        }
      }
      .suoxiao {
        width: 31px;
        height: 31px;
        cursor: pointer;
        img {
          width: 31px;
          height: 31px;
        }
      }
    }
  }
  .huchu {
    position: absolute;
    width: 20px;
    height: 20px;
    // background-color: #444;
    bottom: 15px;
    left: 10px;
    cursor: pointer;
    img {
      width: 100%;
    }
  }
  .btns {
    position: absolute;
    width: 90px;
    height: 90px;
    background-color: #444;
    bottom: 0;
    left: 0;
    .jiugongge {
      ul {
        display: flex;
        box-sizing: border-box;
        flex-wrap: wrap;
        align-items: center;
        li {
          width: 30px;
          height: 30px;
          cursor: pointer;
          list-style: none;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            height: 20px;
            width: 20px;
          }
        }
        .hide {
          opacity: 0;
        }
      }
    }
  }
  .fdsx {
    position: absolute;
    display: flex;
    width: 200px;
    height: 30px;
    bottom: 10px;
    cursor: pointer;
    left: 90px;
    .item {
      width: 30px;
      height: 30px;
      margin: 0 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.pointinfo {
  height: 100%;
  .coll {
    height: 100%;
    .info_left {
      height: 100%;

      .left_top {
        height: 240px;
        margin-bottom: 20px;
        box-shadow: 0px 0px 13px 0px rgba(102, 102, 102, 0.13);
        .lt_title {
          text-align: left;
          margin-left: 10px;
        }
        .top_box {
          width: 100%;
          text-align: left;
          padding-left: 20px;
          box-sizing: border-box;
          height: 44px;
          margin: 10px 0;
          line-height: 44px;
          // background-color: blueviolet;
          .top_input {
            width: 100px;
            display: inline-block;
          }
          .con_submit {
            display: inline-block;
            width: 70px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            background: rgba(78, 114, 200, 1);
            border-radius: 4px;
            cursor: pointer;
            color: #fff;
          }
        }
      }
      .left_bottom {
        height: 240px;
        box-shadow: 0px 0px 13px 0px rgba(102, 102, 102, 0.13);
        .status_title {
          text-align: left;
          margin-left: 10px;
        }
        .status_info {
          width: 100%;
          text-align: left;
          padding-left: 20px;
          box-sizing: border-box;
          height: 38px;
          margin: 5px 0;
          line-height: 38px;
          //  background-color: blueviolet;
        }
      }
    }
  }
  .colr {
    height: 100%;
    .info_right {
      height: 100%;
      margin-left: 20px;
      box-shadow: 0px 0px 13px 0px rgba(102, 102, 102, 0.13);
      box-sizing: border-box;

      .solar_title {
        width: 100%;
        text-align: left;
        padding-left: 10px;
        box-sizing: border-box;
        height: 42px;
        // margin: 10px 0;
        line-height: 44px;
      }
      .solar_info {
        width: 100%;
        text-align: left;
        padding-left: 20px;
        box-sizing: border-box;
        height: 45px;
        margin: 20px 0;
        line-height: 44.5px;
        // background-color: aqua;
      }
    }
  }
}
.search {
  width: 100%;
  height: 12%;
  position: relative;
  .data_query {
    position: absolute;
    line-height: 10px;
    top: 20px;
    left: 0;
    display: flex;
    .data_name {
      height: 44px;
      width: 100px;
      line-height: 38px;
    }
    // justify-content: space-between;
    // align-items: center;
  }
}
</style>
